
<template>
  <div class="box">
    <!-- <img src="../../assets/imgs/adv1.jpg" class="adv" alt="" /> -->
    <img 
    
    :src="titleimg" class="adv" alt="" />
    
    <!-- @click="goDetail(goodsinfo.id)"  -->
    <div class="goods-show">
      <div  
          v-for="(goodsinfo, index) in goodsinfos" :key="index" 
        class="show-box"> 
          <div class="left-img"><img :src="goodsinfo.img"  /></div>
          <div class="right-info">
            <p>{{goodsinfo.name}}</p>
             <router-link   :to="`/Goods/GoodsDetail?id=${goodsinfo.id}`">
            <div>
              <p>
                ￥ <i>{{goodsinfo.price}}</i> 起
                <span>满减</span>
                <span>赠</span>
              </p>
            </div>
             </router-link>
        </div>
      </div>
     
      
    </div>

    <!-- 所有当前组件的子级路由组件，展示在此处 -->
  </div>
</template>

<script>

import axios from "axios";
export default {
  name: "Recommend",
  data() {
    return {
      goodsinfos: "",
      goodsinfo: "",
      goods:"",
      titleimg:""
    };
  },
   methods: {
    goDetail() {
     
      // $router.push({
      //   path: '/GoodsDetail',
      //   query: {id: id}
      //  })
    },
  },  
  created() {
    // console.log("this.$route", this.$route.query.type); //匹配到当前路由对象；
    axios({
      // url: "/goods?type1=" + this.$route.query.type,
      url: "/goods?type1=recommend"
    }).then((res) => {
      // console.log(res.data);
      this.goodsinfos = res.data;
      // console.log(res.goodsinfos);
    });
    axios({
      url: "/goods?type1=redmi&type4=show"
    }).then((res) => {
      // console.log(res);
      this.goods = res.data;
     this.titleimg=this.goods[0].titleimg;
      console.log(this.goods[0].titleimg);
    });

  },
};
</script>

<style scoped>
.box .adv {
  width: 2.5rem;
  height: 0.75rem;
}
.box {
  width: 2.6rem;
  min-height: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.6rem;
  background-color: white;
  overflow-y: auto;
}
.box a,i{
  text-decoration: none;
  color: black;
  font-style: normal;
}
.box .type {
  width: 2.5rem;
  white-space: nowrap;
  overflow-x: auto;
  height: 0.44rem;
  line-height: 0.44rem;
}
.box .type span {
  display: inline-block;
  padding: 0.04rem;
  margin-left: 0.1rem;
  font-size: 0.12rem;
  color: #737373;
  height: 0.2rem;
  border-radius: 0.1rem;
  line-height: 0.2rem;
}
.box .type span:hover {
  background-color: #f3f3f3;
}
.goods-show img {
  width: 0.6rem;
  height: 0.6rem;
  align-items: center;
  margin: 0.07rem;
}
.goods-show {
  display: flex;
  flex-direction: column;
  margin-top: 0.25rem;
}
.goods-show .show-box {
  width: 2.5rem;
  height: 0.75rem;
  background-color: #f8f8f8;
  display: flex;
  border-radius: 0.1rem;
  margin-top: 0.1rem;
}
.goods-show .show-title {
  font-size: 0.15rem;
  font-weight: 700;
  margin-bottom: 0.15rem;
}
.goods-show .left-img {
  display: flex;
  justify-content: center;
}
.goods-show .right-info {
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
}
.goods-show .right-info p {
  font-size: 0.15rem;
  /* margin-bottom: .1rem; */
}
.goods-show .right-info div p {
  font-size: 0.1rem;
}
.goods-show .right-info div i {
  font-size: 0.14rem;
  font-weight: 700;
}
.goods-show .right-info div span {
  color: orange;
  border: 1px solid orange;
  display: inline-block;
  border-radius: 0.03rem;
  margin-left: 0.1rem;
  padding: 0.01rem 0.02rem;
}
</style>
 